<template>
  <div class="pie" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: 'PieCharts',
  data() {
    return {
      chart: null, 
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const color = ['#1e7aff', '#7dda50'];
      const datas = [
        { value: 105, name: '封闭车位' },
        { value: 310, name: '路车车位' },
      ];

      const option = {
        color,
        tooltip: {
          trigger: 'item',
          extraCssText:
            'width: 128px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);',
          formatter: function (params) {
            let str =
              (params.data &&
                `<div style="font-weight: bold;">${params.name}</div>
            <div style="display:flex; justify-content: space-between; align-items: center;">
                <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${
                  color[params.dataIndex]
                }; margin-right: 4px;"></span>占比</span>
                <span>${params.percent}%</span>
            </div>`) ||
              '';
            return str;
          },
        },
        legend: {
          orient: 'vertical',
          left: '5%',
          top: '30%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              formatter: function (params) {
                return `{name|${params.name}}\n{value|${params.value}个}`;
              },
              rich: {
                name: {
                  color: '#ffffff',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 20,
                },
                value: {
                  color: function (params) {
                    return color[params.dataIndex];
                  },
                  fontSize: 12,
                },
              },
              padding: [8, 10],
            },
            data: datas,
            itemStyle: {
              emphasis: {
                // 鼠标经过扇形区域时的阴影效果
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 5,
                smooth: true,
              },
            },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.pie {
  width: 100%;
  height: 1.1458rem;
}
</style>
